<template>
  <div v-if="!dialogShow" class="fundAccountTree-wrapper">
    <div class="tree-wrapper">
      <el-tree :indent="0" lazy ref="tree" node-key="id" :props="treeProps" :load="loadNode" :expand-on-click-node="false"
        icon-class="icon iconfont iconkuangjia-xiala1" @node-contextmenu="openMenu" @node-click="handleNodeClick"
        @node-expand="nodeExpand">
      </el-tree>
    </div>
    <div :class="[`${menuPositionTop ? 'dropMenu menuTop' : 'dropMenu'}` + ' ' + `${menuShow ? 'active' : ''}`]" v-if="dropMenuShow"
      v-show="menuShow" :style="{ top: menuTop + 'px', left: menuLeft + 'px' }">
      <div v-for="item in dropMenuList" :key="item.index" @click="accountOperations(item.index)">
        <span :class="item.icon"></span>
        {{ item.label }}
      </div>
    </div>
  </div>
  <div v-else class="fundAccountTree-wrapper businessMask">
    <div class="businessDialog middle">
      <div class="dialog-header">
        <span>资金科目选择</span>
      </div>
      <div class="dialog-body">
        <div class="tree-wrapper">
          <el-tree :indent="0" lazy ref="tree" node-key="id" :props="treeProps" :load="loadNode"
            :expand-on-click-node="false" icon-class="icon iconfont iconkuangjia-xiala1" @node-contextmenu="openMenu"
            @node-click="handleNodeClick" @node-expand="nodeExpand">
          </el-tree>
        </div>
      </div>
      <div class="dialog-footer right">
        <span class="systemButtonConfirm" @click="confirm">确定</span>
        <span class="systemButtonCancel" @click="cancel">取消</span>
      </div>
    </div>
  </div>
</template>
<script>
import { fundAccountTree } from '@/business/api/fundAccount'

export default {
  data() {
    return {
      treeProps: {
        label: "name",
        isLeaf: "leaf",
        id: "id",
      },
      rootResolve: null, // 根目录
      rootNode: {}, // 根节点
      menuTop: 0,
      menuLeft: 0,
      menuPositionTop: false,
      menuShow: false,
      checkedData: null
    }
  },
  // 是否显示菜单 dropMenuShow 默认无 true-有
  // 是否弹窗 dialogShow 默认无 true-有
  // 菜单 id funcId，弹窗不用传
  // 机构等级 grade
  props: {
    dropMenuShow: null,
    dropMenuList: null,
    dialogShow: { default: false },
    params: {
      funcId: null,
      grade: null,
      pId: null
    }
  },
  created() {
    this.globalClick()
  },
  methods: {
    // 树 懒加载
    async loadNode(node, resolve) {
      let data = {
        userId: this.$store.state.user.info.id,
        funcId: this.params.funcId,
        pId: this.params.pId,
        grade: this.params.grade
      }
      if (node.level === 0) {
        this.rootResolve = resolve;
        this.rootNode = node;
        data.pId = null;
      } else {
        data.pId = node.data.id;
      }
      fundAccountTree(data).then((res) => {
        if (res.code == 200) {
          if (res.success) {
            if (res.info.length === 0 && node.level === 0) { // 顶级无数据
              return resolve([{
                id: 1,
                manageUserId: 261,
                name: '资金科目'
              }])
            } else {
              res.info.forEach((item) => {
                item.icon = item.type
                  ? "icon iconfont icongongnengcaidan-ziliaoguanli"
                  : "icon iconfont icongongnengcaidan-gongchengfuwuguanli";
              });
              return resolve(res.info);
            }
          } else this.message(res.msg, 3);
        } else this.message(res.msg, 3);
      });
    },
    // 节点 左击
    async handleNodeClick(e) {
      let data = e;
      data.clickType = 1;
      this.checkedData = e
      this.$emit("getNodeInfo", data);
      this.menuShow = false;
    },
    // 节点 右击
    async openMenu(e, data, node) {
      await this.$emit("getNodeInfo", node);
      let menuClientY = e.clientY;
      let windowHeight = document.documentElement.clientHeight;
      if (windowHeight - menuClientY > 200) {
        this.menuTop = e.clientY + 30;
        this.menuPositionTop = false;
      } else {
        let height = document.getElementsByClassName("dropMenu")[0]
          .offsetHeight;
        this.menuPositionTop = true;
        this.menuTop = e.clientY - height - 30;
      }
      this.menuLeft = e.clientX;
      this.menuShow = true;
    },
    // 节点 展开
    nodeExpand() {
      this.menuShow = false;
    },
    // 树 菜单
    accountOperations(e) {
      this.$emit("accountOperations", e);
    },
    // 监测页面点击事件，隐藏单位树菜单
    globalClick() {
      let _this = this
      document.addEventListener('click', function (e) {
        _this.menuShow = false
        let flag = e.target.contains(
          document.getElementsByClassName('el-menu')[0]
        )
        if (!flag) return
      })
    },
    // 刷新树
    refreshNode(node) {
      let data = node.operationType ? node : node.parent
      if (node.level === 0 || node.rootNode) data = this.rootNode
      data.loaded = false
      data.expand()
    },
    confirm() {
      if (!this.checkedData) {
        this.message('请选择数据', 3)
        return
      }
      if (!this.checkedData.leaf) {
        this.message('请选择子节点', 3)
        return
      }
      this.$emit('confirm', this.checkedData)
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}

</script>

<style lang="scss">
.fundAccountTree-wrapper {
  .tree-wrapper {
    width: 100%;
    height: 100%;

    .el-tree {
      color: var(--organization-tree-text-color);
      padding-left: 20px;
      background-color: transparent;

      .el-tree-node {
        &:hover .el-tree-node__content {
          background-color: transparent;
        }

        .el-tree-node__content {

          .iconkuangjia-xiala1 {
            color: var(--organization-tree-dropdown-color);
            font-size: 12px;
            padding-left: 0;
            padding-right: 0;

            &~span span {
              &:first-child {
                margin-right: 5px;
                width: 16px;
                height: 16px;
                display: inline-block;
              }

              &:last-child {
                padding: 2px 8px;
              }
            }
          }

          .is-leaf.iconkuangjia-xiala1 {
            visibility: hidden;
          }
        }

        .el-tree-node__children {
          padding-left: 48px;
          overflow: visible;

          .el-tree-node {
            position: relative;

            &::before {
              content: "";
              display: block;
              width: 40px;
              height: 13px;
              border-bottom: 1px solid var(--organization-tree-line-color);
              border-bottom-left-radius: 5px;
              position: absolute;
              top: 0;
              left: 0;
              transform: translateX(-100%);
            }

            &::after {
              content: "";
              display: block;
              width: 40px;
              height: 100%;
              border-left: 1px solid var(--organization-tree-line-color);
              position: absolute;
              bottom: -10px;
              left: 0;
              transform: translateX(-100%);
            }

            &:first-child::after {
              top: 0;
              height: calc(100% + 10px);
            }

            &:last-child::after {
              top: 0;
              height: 11px;
            }
          }
        }

        &.is-current {

          .el-tree-node__content {
            background-color: transparent;

            span:last-child {
              background-color: rgba(83, 168, 255, 1);
              color: rgba(255, 255, 255, 1);
            }
          }

          .el-tree-node__children .el-tree-node .el-tree-node__content span:last-child {
            background-color: transparent;
            color: var(--organization-tree-text-color);
          }
        }

        &.is-expanded .el-tree-node__content {
          background-color: transparent;
        }
      }
    }
  }

  .dropMenu {
    visibility: hidden;

    &.active {
      visibility: visible;
      position: absolute;
      z-index: 998;
      background: rgba(255, 255, 255, 0.85);
      box-shadow: 0px 0px 6px 0px rgba(68, 104, 211, 0.6);
      cursor: pointer;
      display: flex;
      flex-direction: column;

      &::before {
        display: block;
        content: "";
        width: 20px;
        height: 20px;
        position: absolute;
        top: 0;
        transform: rotate(45deg) translateY(-75%);
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 0px 6px 0px rgba(68, 104, 211, 0.6);
        z-index: -999;
      }

      div {
        background: rgba(255, 255, 255, 1);
        padding: 12px 20px;
        display: inline-block;
        white-space: nowrap;
        color: rgba(51, 51, 51, 1);

        .iconzengjia {
          color: rgba(132, 142, 252, 1);
        }

        .iconbiaoge-bianji {
          color: rgba(51, 153, 255, 1);
        }

        .iconbiaoge-shanchu {
          color: rgba(249, 73, 99, 1);
        }

        &:hover {
          z-index: 999;
          background: rgba(83, 168, 255, 1);
          color: rgb(255, 255, 255);

          .icon {
            color: rgb(255, 255, 255);
          }
        }

        span {
          margin-right: 13px;
        }
      }

      &.menuTop {
        &::before {
          top: 100%;
        }
      }
    }
  }

}
</style>
